import React, {useEffect, useState} from 'react';
import {Button, Card, message, Space, Table, theme} from 'antd';
import type { TableProps } from 'antd';
import {DebrisListApi} from "@/api/Debris.ts";
import Search from 'antd/es/input/Search';
import { useNavigate } from 'react-router-dom';
import {Content} from "antd/es/layout/layout";

// interface DataType {
//     key: string;
//     name: string;
//     age: number;
//     address: string;
//     tags: string[];
// }

const View: React.FC = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const navigateTo = useNavigate();

    const [listData, setListData] = useState<DebrisListRes>();

    useEffect(() => {
        DebrisListApi().then(function (res) {
            console.log(res);
            if (res.code === 400) {
                message.error(res.msg);
            }else{
                // 赋值
                setListData(res.data);
            }
        });
    }, []);

    const columns: TableProps<DebrisListResData>['columns'] = [
        {
            title: '碎片总数',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '总数',
            dataIndex: 'total',
            key: 'total',
        },
        {
            title: '保留数量',
            dataIndex: 'reserve',
            key: 'reserve',
        },
        {
            title: '碎片总价',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '开始时间',
            dataIndex: 'start_time',
            key: 'start_time',
        },
        {
            title: '结束时间',
            dataIndex: 'end_time',
            key: 'end_time',
        },
        {
            title: '添加时间',
            dataIndex: 'create_time',
            key: 'create_time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];

    return (
        <>
            <Card type="inner" title="搜索">
                <div style={{ display: 'flex', width: '100%' }}>
                    <Button
                        style={{ marginRight: 20 }}
                        type={'primary'}
                        onClick={() => {
                            navigateTo(`/smartDesktop/index/edit`);
                        }}
                    >
                        新建
                    </Button>
                    <Button
                        style={{ marginRight: 20 }}
                        onClick={() => {
                            // setPageIndex(0);
                            console.log('111');
                        }}
                    >
                        刷新
                    </Button>
                    <Search
                        allowClear
                        style={{ width: 400, marginLeft: 'auto' }}
                        enterButton={'搜索'}
                        key={undefined}
                        defaultValue={undefined}
                        placeholder={'请输入方案名称或备注'}
                        onSearch={(value, event) => {
                            console.log('搜索值', value);
                            console.log('搜索事件', event);
                        }}
                    />
                </div>
            </Card>
            <Card
                style={{ marginTop: 16 }}
                type="inner"
                title="碎片列表"
            >
                <Content
                    style={{
                        // padding: 24,
                        margin: 0,
                        minHeight: 380,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Table
                        columns={columns}
                        dataSource={listData?.data}
                        size="small"
                        virtual
                        scroll={{ y: 'calc(100vh - 300px)' }}
                    />
                </Content>
            </Card>
        </>
    )
}

export default View;